import React, {  useCallback } from 'react';
import { useShadow } from '../../hooks/lighthook';
import styles from './index.module.scss';
import 地图 from '../../image/地图icon.png'
import 日历 from '../../image/日历.png'
import 设置 from '../../image/系统偏好设置.png'
import 信息 from '../../image/信息.png'
import 终端 from '../../image/终端.png'
import appstore from '../../image/appstore.png'
import 提醒 from '../../image/提醒.png'
import Finder from '../../image/Finder.png'
import safari from '../../image/safari.png'
import 活动监视器 from '../../image/活动监视器.png'
import 照片 from '../../image/照片.png'
import 时钟 from '../../image/时钟.png'
const mockdata = [地图,时钟,日历,设置,信息,终端,appstore,Finder,safari,活动监视器,照片,提醒]
interface AppIconProps {
    inner:string
}
const AppIcon:React.FC<AppIconProps> = ({inner}) => {
    const [shadowX,shadowY,blur] = useShadow()
    const getAlpha = useCallback(()=>{
        let alpha = 0
        if(Math.abs(shadowX)>Math.abs(shadowY)){
            alpha = 0.5 - Math.abs(shadowX)/100
        }else{
            alpha = 0.5 - Math.abs(shadowY)/100
        }
        return alpha
    },[shadowX, shadowY]) 
    return (
        <>
            <div 
            className={styles.icon}
            style={{boxShadow:`${shadowX}px ${shadowY}px ${blur}px rgba(0,0,0,${getAlpha()})`}}
            >
                <img draggable={false} src={inner} alt="no" />
            </div>
        </>
    )
}
const DeskTop = () => {
    
    return (
        <div className={styles.box} >
            <div className={styles.modle}></div>
            <div className={styles.apps}>
                {mockdata.map((app,index) => {
                    return <AppIcon key={index} inner={app}/>
                })}
            </div>
        </div>
    )
}


export default DeskTop